Vue.component('coma-number', {
  template:
    `
<div style="display: flex">
 <el-input-number 
     v-model.number="innerVal" 
     @change="handleChange" 
     :min="-10000000000" 
     :max="100000" 
     size="small"
     :precision="2"
 ></el-input-number>
  <el-select
      size="small"
      v-model="unit" 
      placeholder="请选择"
      style="width: 90px"
      @change="fireCom(innerVal)"
  >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
</div>
` ,
  props: {
    value: null,
    units: Array
  },
  data() {
    let { innerVal, unit } = this.parseValue(this.value)
    return {
      unit: unit ? unit : this.units[0],
      innerVal: innerVal,
      options: this.units.map(v => {
        return {
          label: v,
          value: v
        }
      })
    }
  },

  methods: {
    handleChange(value) {
      this.fireCom(value)
    },
    getValue(value) {
      return value + this.unit
    },
    parseValue(v) {
      // console.log('parseValue', v)
      let _v = parseFloat(v)
      // console.log('parsedValue', _v)
      return {
        innerVal: _v,
        unit: v.replace(_v, '')
      }
    },
    fireCom(value) {
      this.$emit('change', this.getValue( value ))
    }
  },
})

Vue.component('coma-demo', {
  template:
    `
<div>
  <h3>单位选择</h3>
  <div>{{model}}</div>
  <div>{{parsedModel}}</div>
  <coma-number :value="model.num"
               :units="['rem', 'px']"
               @change="onFormChange('num', $event)"></coma-number>
  <coma-number :value="model.zxc"
               :units="['个', '堆']"
               @change="onFormChange('zxc', $event)"></coma-number>
</div>
`,
  data() {
    return {
      model: {
        num: '1rem',
        zxc: '1个',
      },
      parsedModel: {}
    }
  },
  methods: {
    onFormChange(key, e) {
      // console.log(key, e)
      this.$nextTick(() => {
        this.$set(this.parsedModel, key, e)
      })
    }
  },
})
